<script lang="ts" setup>
import type { Rule } from 'ant-design-vue/es/form';

import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  Button,
  Checkbox,
  Form,
  FormItem,
  Input,
  InputPassword,
  message,
} from 'ant-design-vue';

import { getCaptChaImage, userRegister } from '#/api';

const captchaImage = ref('');
const userRegisterData = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  code: '',
  uuid: '',
  remember: true,
});
const router = useRouter();

const goLogin = () => router.replace('/auth/login');

const refreshCaptchaImage = () => {
  getCaptChaImage()
    .then((res) => {
      captchaImage.value = `data:image/;base64,${res.data.img}`;
      userRegisterData.uuid = res.data.uuid;
    })
    .catch((error) => {
      console.warn(error);
    });
};
refreshCaptchaImage();
function onFinish(values: typeof userRegisterData) {
  userRegister(values)
    .then(({ data: { code, msg } }) => {
      if (code === 200) {
        message.success('恭喜你，登录成功🎉');
      } else if (code === 500) {
        message.error(msg);
        refreshCaptchaImage();
      }
    })
    .catch((error) => {
      console.warn(error);
    });
}
const validateRules: Record<string, Rule[]> = {
  username: [{ required: true, trigger: 'blur' }],
  password: [{ required: true, trigger: 'blur', min: 5, max: 20 }],
  confirmPassword: [{ required: true, trigger: 'blur' }],
  code: [{ required: true, trigger: 'blur' }],
  uuid: [{ required: true, trigger: 'blur' }],
};
</script>

<template>
  <h1 class="mb-4 text-[24px]">{{ $t('authentication.createAnAccount') }}🎉</h1>
  <Form :model="userRegisterData" :rules="validateRules" @finish="onFinish">
    <FormItem name="username" label="用户名">
      <!-- 用户名 -->
      <Input
        v-model:value="userRegisterData.username"
        placeholder="请输入用户名"
      />
    </FormItem>
    <FormItem name="password" label="密码">
      <!-- 密码 -->
      <InputPassword
        v-model:value="userRegisterData.password"
        placeholder="请输入密码"
      />
    </FormItem>
    <FormItem name="confirmPassword" label="确认密码">
      <!-- 确认密码 -->
      <InputPassword
        v-model:value="userRegisterData.confirmPassword"
        placeholder="请再次输入密码"
      />
    </FormItem>
    <FormItem name="code" label="验证码">
      <!-- 验证码 -->
      <div class="flex gap-2">
        <Input
          v-model:value="userRegisterData.code"
          placeholder="请输入验证码"
        />
        <img
          :src="captchaImage"
          class="h-[32px] cursor-pointer"
          @click="refreshCaptchaImage"
          alt="验证图"
        />
      </div>
    </FormItem>
    <FormItem class="hidden" name="uuid">
      <Input :value="userRegisterData.uuid" />
    </FormItem>
    <FormItem name="remember" label="记住密码">
      <Checkbox v-model:checked="userRegisterData.remember">记住密码</Checkbox>
    </FormItem>
    <FormItem>
      <!-- 表单操作区 -->
      <Button type="primary" block html-type="submit">提交</Button>
    </FormItem>
    <div class="mt-4 text-center text-sm">
      {{ $t('authentication.alreadyHaveAccount') }}
      <span class="vben-link text-sm font-normal" @click="goLogin">
        {{ $t('authentication.goToLogin') }}
      </span>
    </div>
  </Form>
</template>

<style scoped lang="scss">
:deep(.ant-form-item-label) {
  display: none;
}
</style>
